<template>
    <a-input-number style="width:100%" v-model.number="NumberValue" :placeholder="placeholder" spellcheck="false"
        v-if="Value != 'auto'">
        <template #addonAfter>
            <a-popover>
                <template #content>
                    <div class="UnitItem" :class="{ active: item == Unit }" @click="Unit = item"
                        v-for="item in UnitList" :key="item">
                        {{ item }}
                    </div>
                </template>
                <span>{{ Unit }}</span>
            </a-popover>
        </template>
    </a-input-number>
    <a-input style="width:100%" :disabled="true" v-model:value="Value" spellcheck="false" v-else="Value == 'auto'">
        <template #addonAfter>
            <a-popover>
                <template #content>
                    <div class="UnitItem" :class="{ active: item == Unit }" @click="Unit = item"
                        v-for="item in UnitList" :key="item">
                        {{ item }}
                    </div>
                </template>
                <span>{{ Unit }}</span>
            </a-popover>
        </template>
    </a-input>
</template>
<script setup>
import { nextTick, ref, watch } from 'vue';
const props = defineProps(['placeholder']);
const Value = defineModel('value');

const Unit = ref('px');
const UnitList = ['rem', 'em', 'px', '%', 'vw', 'vh', 'auto'];

const NumberValue = ref(null);

let ValueFelg = false;

watch(Value, (val) => {
    var value = parseFloat(val);
    ValueFelg = true;
    Unit.value = val ? (val + '').replace((value + ''), '') : 'px';
    NumberValue.value = value;
    nextTick(() => {
        ValueFelg = false;
    })
}, { immediate: true });


watch([Unit, NumberValue], (val) => {
    if (Unit.value == 'auto') {
        Value.value = 'auto';
    } else {
        if (isNaN(NumberValue.value)) {
            NumberValue.value = null;
        }
        if (!ValueFelg) {
            if (NumberValue.value === 0 || NumberValue.value) {
                Value.value = NumberValue.value + Unit.value;
            } else {
                Value.value = undefined
            }
        }
    }
})




</script>
<style lang="less" scoped>
.UnitItem {
    padding: 0 11px;
    cursor: pointer;
    text-align: center;
    border-radius: 3px;

    &:hover {
        background-color: #f0f0f0;
    }

    &.active {
        background-color: #1677ff;
        color: #fff;
    }
}
</style>